<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <title>商品管理</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"/>
    <style type="text/css">
        .layui-table-cell{
            height: auto!important;
            white-space: normal;
        }
    </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">校园二手物品后台</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a href="/admin/userinit">用户管理</a></li>
            <li class="layui-nav-item"><a href="/admin/init">商品管理</a></li>
            <li class="layui-nav-item"><a href="/admin/shoppingCarInit">购物车管理</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">订单管理</a>
                <dl class="layui-nav-child">
                    <dd><a th:href="@{/admin/BuyOrderInit}">我是买家</a></dd>
                    <dd><a th:href="@{/admin/SellOrderInit}">我是卖家</a></dd>
                </dl>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:">
                    <img th:src= "${session.url}" class="layui-nav-img">
                    我的
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="/admin/userInfo">基本资料</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="/admin/quit">退了</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree"  lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">所有商品</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">列表一</a></dd>
                        <dd><a href="javascript:;">列表二</a></dd>
                        <dd><a href="javascript:;">列表三</a></dd>
                        <dd><a href="">超链接</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">解决方案</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">列表一</a></dd>
                        <dd><a href="javascript:;">列表二</a></dd>
                        <dd><a href="">超链接</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="">云市场</a></li>
                <<li class="layui-nav-item"><a th:href="@{/showAll}">返回前台</a></li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <table id="demo" lay-filter="test"></table>

    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © layui.com - 底部固定区域
    </div>
</div>
<script th:src="@{/layui/layui.js}"></script>
<script>
    //JavaScript代码区域
    layui.use('element', function(){
        var element = layui.element;

    });
</script>
<script th:inline="javascript">
    layui.use('table', function(){
        var table = layui.table;
        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            const $=layui.$;

            if(layEvent === 'detail'){ //查看
                layer.confirm('确认查看', function(index){
                    $.ajax({
                        url: '/admin/detail/info',
                        type: 'POST',
                        data:{p_Id:data.p_Id},
                        success:function (res){
                            if(res.code===200) {
                                tableIns.reload();
                                layer.open({
                                    type: 2,
                                    content: '/admin/detail',
                                    title:false,
                                    area: ['500px', '400px'],
                                    success: function(layero, index){
                                        layer.msg('正在查看物品编号为:'+data.p_Id+'的信息');
                                    }
                                });
                            }
                            else
                                layer.msg('查看失败');
                        }
                        ,error(error){
                            layer.msg(error);
                        }
                    });
                    layer.close(index);
                });
            } else if(layEvent === 'del'){ //删除
                layer.confirm('确定要下移除该物品吗？', function(index){
                    $.ajax({
                        url: '/admin/shoppingCardelete',
                        type: 'POST',
                        data:{s_Id:data.s_Id},
                        success:function (res){
                            if(res.code===200) {
                                tableIns.reload();
                                layer.msg('移除成功');
                            }
                            else
                                layer.msg('移除失败');
                        }
                        ,error(error){
                            layer.msg("请求出错");
                        }
                    });
                    layer.close(index);
                });
            } else if (layEvent === 'buy') { //购买

                console.log(data.p_Id);
                layer.open({
                    type: 2,
                    content: '/buyGoodsInit?p_Id=' + data.p_Id,
                    area: ['454px','365px'],
                    title: false,
                    success: function (layero, index){
                        const body = layer.getChildFrame('body', index);
                        body.find('#p_Id').val(data.p_Id);
                        body.find('#s_Id').val(data.s_Id);
                    },
                    cancel: function (index, layero){
                        tableIns.reload();
                    }
                })
            } else if(layEvent === 'LAYTABLE_TIPS'){
                layer.alert('Hi，头部工具栏扩展的右侧图标。');
            }
        });
        table.on('toolbar(test)', function(obj){
            const $=layui.$;
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'add':
                    var count=0;
                    layer.open({
                        type: 2,
                        content: '/admin/addinit',
                        area: ['600px', '600px'],
                        title: false,
                        success: function(layero, index){
                            if(count==0) {
                                layer.msg("请添加信息");
                                count++;
                            }
                            else{
                                layer.msg("添加成功");
                                tableIns.reload();
                            }
                        }
                    });
                    break;
            };
        });
        //第一个实例
        var tableIns = table.render({
            elem: '#demo'
            ,url: '/admin/shoppingCarAll' //数据接口
            ,toolbar: '#toolbarDemo'
            , page: true
            ,limit:10
            ,limits:[10,30,50]
            ,response: {
                statusCode: 200 //规定成功的状态码，默认：0
            }
            ,cols: [[ //表头
                {field: 's_Id', title: '编号', sort: true}
                ,{field: 'p_href', title: '物品图片', templet: "<div><img  src=\"{{ d.p_href }}\"></div>"}
                ,{field: 'p_Title', title: '物品标题'}
                ,{field: 'p_Price', title: '价格',sort: true}
                ,{title: '操作', toolbar: '#barDemo'}
            ]]
        });
    });
</script>

<style type="text/css">
    .laytable-cell-1-p_href{
        height:100%;
        max-width:100%
    }
    .layui-table-cell{
        text-align:center;
    }
</style>
<script type="text/html" id="barDemo">
<!--    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>-->
    <a class="layui-btn layui-btn-xs" lay-event="buy">确认购买</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">移除购物车</a>
</script>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
    </div>
</script>
</body>
</html>